<template>
  <div class="learn-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">📚 学习中心</h1>
        <p class="page-subtitle">智能学习，科学进步</p>
      </div>
    </div>

    <!-- 学习菜单导航 -->
    <div class="learn-menu">
      <div class="menu-container">
        <button
          v-for="menuItem in menuItems"
          :key="menuItem.id"
          :class="['menu-item', { active: activeMenu === menuItem.id }]"
          @click="switchMenu(menuItem.id)"
        >
          <span class="menu-icon">{{ menuItem.icon }}</span>
          <span class="menu-text">{{ menuItem.name }}</span>
        </button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 任务内容 -->
      <div v-if="activeMenu === 'task'" class="content-section">
        <TaskContent />
      </div>

      <!-- 练习内容 -->
      <div v-if="activeMenu === 'practice'" class="content-section">
        <PracticeContent />
      </div>

      <!-- 复习内容 -->
      <div v-if="activeMenu === 'review'" class="content-section">
        <ReviewContent />
      </div>

      <!-- 学习方案内容 -->
      <div v-if="activeMenu === 'studyplan'" class="content-section">
        <StudyPlanContent />
      </div>
    </div>
  </div>
</template>

<script>
import TaskContent from './components/TaskContent.vue'
import PracticeContent from './components/PracticeContent.vue'
import ReviewContent from './components/ReviewContent.vue'
import StudyPlanContent from './components/StudyPlanContent.vue'

export default {
  name: "LearnPage",
  components: {
    TaskContent,
    PracticeContent,
    ReviewContent,
    StudyPlanContent
  },
  data() {
    return {
      // 当前激活的菜单
      activeMenu: 'task',
      
      // 菜单项配置
      menuItems: [
        {
          id: 'task',
          name: '任务',
          icon: '🎯'
        },
        {
          id: 'practice',
          name: '练习',
          icon: '💪'
        },
        {
          id: 'review',
          name: '复习',
          icon: '📚'
        },
        {
          id: 'studyplan',
          name: '学习方案',
          icon: '📋'
        }
      ]
    };
  },
  methods: {
    // 切换菜单
    switchMenu(menuId) {
      this.activeMenu = menuId;
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.learn-page {
  min-height: 100vh;
  background: #f8f9fa;
  position: relative;
}

.learn-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f8f9fa;
  z-index: -1;
}

/* 页面头部 */
.page-header {
  color: #2c3e50;
  padding: 60px 20px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%236c757d" opacity="0.05"/><circle cx="75" cy="75" r="1" fill="%236c757d" opacity="0.05"/><circle cx="50" cy="10" r="0.5" fill="%236c757d" opacity="0.05"/><circle cx="10" cy="60" r="0.5" fill="%236c757d" opacity="0.05"/><circle cx="90" cy="40" r="0.5" fill="%236c757d" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.header-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: #2c3e50;
  animation: fadeInUp 0.8s ease-out;
}

.page-subtitle {
  font-size: 1.3rem;
  margin: 0;
  color: #6c757d;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* 学习菜单 */
.learn-menu {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.menu-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 30px;
  border: 2px solid #e1e5e9;
  border-radius: 15px;
  background: white;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-width: 120px;
}

.menu-item:hover {
  border-color: #6c757d;
  color: #6c757d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

.menu-item.active {
  background: #6c757d;
  border-color: #6c757d;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

.menu-icon {
  font-size: 2rem;
}

.menu-text {
  font-size: 1rem;
  font-weight: 600;
}

/* 内容区域 */
.content-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.content-section {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-height: 600px;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 40px 15px 30px;
  }

  .page-title {
    font-size: 2.2rem;
  }

  .page-subtitle {
    font-size: 1.1rem;
  }

  .learn-menu {
    padding: 0 15px;
  }

  .menu-container {
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
  }

  .menu-item {
    min-width: 100px;
    padding: 15px 20px;
  }

  .menu-icon {
    font-size: 1.5rem;
  }

  .menu-text {
    font-size: 0.9rem;
  }

  .content-area {
    padding: 0 15px 30px;
  }

  .content-section {
    padding: 20px;
    min-height: 500px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 30px 15px 20px;
  }

  .page-title {
    font-size: 1.8rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }

  .menu-container {
    flex-direction: column;
    gap: 10px;
  }

  .menu-item {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 15px;
  }

  .content-section {
    padding: 15px;
    min-height: 400px;
  }
}
</style>